(function () {
    $.fn.extend({
        reckon() {
           
            var localData = JSON.parse(localStorage.getItem('meun') || '[]');

            var strHtml = ``

            $.each(localData, function (k, item) {
                strHtml += `
                    <ul class="clearfix">
                    <li class="td-chk fl" data-id=${item.id}>
                    <div class="td-inner">
                    <div class="cart-checkbox fl"><input type="checkbox"
                            class="J_CheckBoxItem" >
                    </div>
                </div>
            </li>
            <li class="td-item fl">
                <div class="td-inner">
                    <div class="item-pic"><a href="#"><img
                                src=${item.image} alt=""
                                class="itempic"></a></div>
                    <div class="item-info">
                        <div class="item-basic-info"><a href=""
                                class="item-title">${item.name}</a>
                        </div>
                    </div>
                </div>
            </li>
            <li class="td-price fl">
                <div class="td-inner">
                    <div class="price-line">￥<em class=" price-now">${item.price}</em></div>
                </div>
            </li>
            <li class="td-amount fl">
                <div class="td-inner">
                    <div class="amount-wrapper ">
                        <div class="item-amount ">
                            <button class="sub btn1">-</button>
                            <input type="text" value=${item.num} class="text fl">
                            <button class="sup btn2">+</button>
                        </div>
                    </div>
                </div>
            </li>
            <li class="td-sum fl">
                <div class="td-inner">￥<em class="number">${(item.price * item.num).toFixed(1)}</em></div>
            </li>
            <li class="fl td-op">
                <div class="td-inner"><a class='del' href='javascript:void(0)'>删除</a></div>
            </li>
            </ul>
            `

                return strHtml;

            })

            $('.first-item').html(strHtml);

            totalMoney();
            $('.first-item').on('click', function (event) {

                var ele = event.target;

                if (!(ele.nodeName == 'BUTTON' && ele.className == 'sub btn1')) {
                    return;
                }

                var $index = $(ele).parents().eq(4).index()
                var num = $('.text').eq($index).val();
                num--;
                if (num <= 1) {
                    num = 1;
                }
                $('.text').eq($index).val(num);
                var price = $(ele).parents().children().eq(8).find('em').text()
                $($(ele).parents().children().eq(10).find('em')).text((price * num).toFixed(1));

                var Id = $(ele).parents().eq(4).children().eq(0).attr('data-id');
                var localData = JSON.parse(localStorage.getItem('meun') || '[]');
                $.each(localData, function (key, item) {
                    if (item == Id) {
                        item.num = num;
                    }
                })
                localStorage.setItem('meun', JSON.stringify(localData));
                totalMoney();
            })
            $('.first-item').on('click', function (event) {

                var ele = event.target;

                if (!(ele.nodeName == 'BUTTON' && ele.className == 'sup btn2')) {
                    return;
                }
                var $index = $(ele).parents().eq(4).index()
                var num = $('.text').eq($index).val();
                num++;
                $('.text').eq($index).val(num);
                var price = $(ele).parents().children().eq(8).find('em').text()
                $($(ele).parents().children().eq(10).find('em')).text((price * num).toFixed(1));

                var Id = $(ele).parents().eq(4).children().eq(0).attr('data-id');

                var localData = JSON.parse(localStorage.getItem('meun') || '[]');
                $.each(localData, function (key, item) {
                    if (item == Id) {
                        item.num = num;
                    }
                })
                localStorage.setItem('meun', JSON.stringify(localData));
                totalMoney();
            })
            $('.first-item').on('click', function (event) {
                var ele = event.target;
                if (!(ele.nodeName == 'A' && ele.className == 'del')) {
                    return;
                }
                if (!confirm('不买吗')) {
                    return
                }
                var Id = $(ele).parents().eq(2).children().eq(0).attr('data-id');

                var localData = JSON.parse(localStorage.getItem('meun') || '[]');
                var index = -1;
                $.each(localData, function (i, item) {
                    if (localData[i].id == Id) {
                        index = i;
                        return;
                    }
                })
                localData.splice(index, 1);
                localStorage.setItem('meun', JSON.stringify(localData));

                $(ele).parents().eq(2).remove()

                totalMoney();

            })

            //全选和全不选
            $(".all").click(function () {

                $(".clearfix :checkbox").prop("checked", $(this).prop("checked"))
                $('.all').prop("checked", $(this).prop("checked"))
                let $index1 = $(".clearfix :checkbox:checked").length;
                $('.amount-sum').children().eq(1).text($index1)
            })
            //反选
            $('#reverse').click(function () {
                Array.from($(".clearfix :checkbox")).forEach(item => $(item).prop("checked", !$(item).prop("checked")))
                let $index2 = $(".clearfix :checkbox:checked").length;
                $('.amount-sum').children().eq(1).text($index2)
            })

            //给每一个复选框绑定点击事件  click 内部会做隐式的迭代 (遍历)
            $(".clearfix :checkbox").click(function () {
                //1 cbx的个数
                let cbxCount = $(".clearfix :checkbox").length;
                //2 被选中cb的个数  :checked 选中的
                let cbxCheckedCount = $(".clearfix :checkbox:checked").length;

                //3相等 让all打钩
                if (cbxCount === cbxCheckedCount && !(cbxCheckedCount === 0)) {
                    $(".all").prop("checked", cbxCount === cbxCheckedCount);
                } else {
                    $(".all").prop("checked", false);
                }
                $('.amount-sum').children().eq(1).text(cbxCheckedCount)
            })
            function totalMoney() {
                let cbxCount = $(".clearfix :checkbox").length;
                console.log(cbxCount);
                var moeny = 0;
                for (var i = 0; i < $('.first-item').children.length; i++) {
                    moeny += Number($('.first-item').children().eq(i).children().eq(4).find('.number').text())
                }
                $('.zhangdan').text(moeny);
            }

        }
    })
})()
$(function () {
    $('.J_CartMain').reckon()
})
